<div class="container-fluid data-analysis">
  <div class="title">数据分析</div>
  <nav class="tabs-nav">
    <button (click)="sourceType=0" [ngClass]="{'tab-item-active':sourceType==0}" class="tab-item" type="button">概况
    </button>
    <button (click)="sourceType=1" [ngClass]="{'tab-item-active':sourceType==1}" class="tab-item" type="button">访问分析
    </button>
    <button (click)="sourceType=2" [ngClass]="{'tab-item-active':sourceType==2}" class="tab-item" type="button">用户画像
    </button>
  </nav>

  <!--概况-->
  <div *ngIf="sourceType == 0">
    <div class="part-container">
      <div class="part-title">昨日概况</div>
      <div class="col-md-12">
        <div class="col-md-3 data-detail">
          <div>打开次数</div>
          <div class="data-num">29</div>
          <div>日 -</div>
          <div>周 -</div>
          <div>月 -</div>
        </div>
        <div class="col-md-3 data-detail">
          <div>访问次数 / 人数</div>
          <div class="data-num">89 / 13</div>
          <div>日 - / -</div>
          <div>周 - / -</div>
          <div>月 - / -</div>
        </div>
        <div class="col-md-3 data-detail">
          <div>打开次数</div>
          <div class="data-num">29</div>
          <div>日 -</div>
          <div>周 -</div>
          <div>月 -</div>
        </div>
        <div class="col-md-3 data-detail">
          <div>打开次数</div>
          <div class="data-num">29</div>
          <div>日 -</div>
          <div>周 -</div>
          <div>月 -</div>
        </div>
      </div>
    </div>
    <div class="part-container">
      <div class="part-title">
        <select class="form-control">
          <option value="0">累计访问用户数</option>
          <option value="0">打开次数</option>
          <option value="0">访问次数</option>
          <option value="0">访问人数</option>
          <option value="0">新访问用户数</option>
          <option value="0">分享次数</option>
          <option value="0">分享人数</option>
          <option value="0">人均停留时长</option>
          <option value="0">次均停留时长</option>
        </select>
      </div>
      <div class="part-time">
        <select class="form-control">
          <option value="0">最近30天</option>
          <option value="0">最近7天</option>
        </select>
        <span class="time-range">2017年05月29日-2017年06年28日</span>
      </div>
      <div class="part-echarts" id="dash-echarts-line"></div>
    </div>
  </div>

  <!--访问分析-->
  <div *ngIf="sourceType == 1">
    <div class="part-container">
      <div class="part-title">
        <select class="form-control">
          <option value="0">打开次数</option>
          <option value="0">访问次数</option>
          <option value="0">访问人数</option>
          <option value="0">新用户数</option>
          <option value="0">人均停留时长</option>
          <option value="0">次均停留时长</option>
          <option value="0">平均访问深度</option>
        </select>
      </div>
      <div class="part-time">
        <select class="form-control">
          <option value="0">最近30天</option>
          <option value="0">最近7天</option>
        </select>
        <span class="time-range">2017年05月29日-2017年06年28日</span>
        <div class="pull-right time-interval">
          <span>粒度</span>
          <select class="form-control">
            <option value="0">日</option>
            <option value="0">周</option>
            <option value="0">月</option>
          </select>
        </div>

      </div>
      <div class="part-echarts" id="visit-echarts-line"></div>
    </div>

    <div class="part-container">
      <div class="part-title">访问分布</div>
      <div class="part-time">
        <select class="form-control">
          <option value="0">最近30天</option>
          <option value="0">最近7天</option>
        </select>
        <span class="time-range">2017年05月29日-2017年06年28日</span>
      </div>
      <div class="part-echarts">
        <div class="col-md-4">
          <div class="echarts-item-content" id="visit-source"></div>
          <div class="echarts-item-title">访问来源</div>
        </div>
        <div class="col-md-4">
          <div class="echarts-item-content" id="visit-time"></div>
          <div class="echarts-item-title">访问时长</div>
        </div>
        <div class="col-md-4">
          <div class="echarts-item-content" id="visit-deep"></div>
          <div class="echarts-item-title">访问深度</div>
        </div>
      </div>
    </div>

    <div class="part-container">
      <div class="part-title">
        <select class="form-control">
          <option value="0">新增存留</option>
          <option value="0">活跃存留</option>
        </select>
      </div>
      <div class="part-time">
        <select class="form-control">
          <option value="0">最近30天</option>
          <option value="0">最近7天</option>
        </select>
        <span class="time-range">2017年05月29日-2017年06年28日</span>
        <div class="pull-right time-interval">
          <span>粒度</span>
          <select class="form-control">
            <option value="0">日</option>
            <option value="0">周</option>
            <option value="0">月</option>
          </select>
        </div>
      </div>
      <table class="table">
        <thead>
        <tr>
          <th>时间</th>
          <th>新增用户</th>
          <th>一天后</th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <td>2017-06-05</td>
          <td>13</td>
          <td>8%</td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>

  <!--用户画像-->
  <div *ngIf="sourceType == 2">
    <div class="part-container">
      <div class="part-title">
        性别及年龄分布
      </div>
      <div class="part-time">
        <select class="form-control">
          <option value="0">活跃用户数</option>
          <option value="0">新增用户数</option>
        </select>
        <select class="form-control">
          <option value="0">昨天</option>
          <option value="0">最近7天</option>
          <option value="0">最近30天</option>
        </select>
        <span class="time-range">2017年05月29日-2017年06年28日</span>
      </div>
      <div class="part-half-echarts">
        <div class="echarts-item-content" id="sex-echarts"></div>
        <div class="echarts-item-title">性别分布</div>
      </div>

      <div class="part-half-echarts">
        <div class="echarts-item-content" id="age-echarts"></div>
        <div class="echarts-item-title">年龄分布</div>
      </div>
    </div>

    <div class="part-container">
      <div class="part-title">地区分布</div>
      <div class="part-time">
        <select class="form-control">
          <option value="0">活跃用户数</option>
          <option value="0">新增用户数</option>
        </select>
        <select class="form-control">
          <option value="0">昨天</option>
          <option value="0">最近7天</option>
          <option value="0">最近30天</option>
        </select>
        <span class="time-range">2017年05月29日-2017年06年28日</span>
      </div>
      <div class="part-half-echarts" id=""></div>
      <div class="part-half-echarts">
        <table class="table">
          <thead>
          <tr>
            <th>省份</th>
            <th>用户数</th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td>2017-06-05</td>
            <td>13 <span class="table-progress"></span>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
      <div class="part-time">
        <select class="form-control">
          <option value="0">全国</option>
        </select>
      </div>
      <table class="table">
        <thead>
        <tr>
          <th>城市</th>
          <th>用户数</th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <td>2017-06-05</td>
          <td>8% <span class="table-progress"></span></td>
        </tr>
        </tbody>
      </table>
    </div>

    <div class="part-container">
      <div class="part-title">
        终端及机型分布
      </div>
      <div class="part-time">
        <select class="form-control">
          <option value="0">活跃用户数</option>
          <option value="0">新增用户数</option>
        </select>
        <select class="form-control">
          <option value="0">昨天</option>
          <option value="0">最近7天</option>
          <option value="0">最近30天</option>
        </select>
        <span class="time-range">2017年05月29日-2017年06年28日</span>
      </div>
      <div class="part-half-echarts">
        <div class="echarts-item-content" id="terminal-echarts"></div>
        <div class="echarts-item-title">终端分布</div>
      </div>

      <div class="part-half-echarts">
        <div class="echarts-item-content" id="type-echarts"></div>
        <div class="echarts-item-title">机型分布</div>
      </div>
      <table class="table">
        <thead>
        <tr>
          <th>性别</th>
          <th>新增用户</th>
          <th>占比</th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <td>2017-06-05</td>
          <td>15</td>
          <td>8% <span class="table-progress"></span></td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>



